import { VFC, useState, useEffect } from "react";
import { Button } from 'antd';
const FilePage: VFC<{}> = () => {
    const [a, setA] = useState('a');
    const [b, setB] = useState('b');
    const [c, setC] = useState('c');
    useEffect(() => {
        console.log('a useEffect')
    }, [a]);

    useEffect(() => {
        console.log('b useEffect');
        let arr: any[] = [];
        for(let i = 0; i < 100001; i++) {
            arr.push(i);
            JSON.parse(JSON.stringify(arr));
        }
        for(let i = 0; i < 100000; i++) {
            JSON.parse(JSON.stringify(arr));
        }
        console.warn('--------');
        console.time('set B');
        setB(v => v+'b');
        console.timeEnd('set B');
    }, [a]);

    useEffect(() => {
        console.log('c useEffect')
        let arr: any[] = [];
        for(let i = 0; i < 10000111; i++) {
            arr.push(i);
            JSON.parse(JSON.stringify(arr));
        }
        for(let i = 0; i < 100000; i++) {
            JSON.parse(JSON.stringify(arr));
        }
        setC(v=> v+'c')
    }, [b]);
    const onClick = () => {
        console.time('click');
        setA((a) => a+'a');
        console.timeEnd('click');
    }
    console.log('render');
    return (
        <div>
            <Button onClick={onClick}>点击</Button>
        </div>
    );
}

export default FilePage;